<template>
  <div>
    <h1>问卷答题情况统计</h1>
<!--    <p>答题人数: {{ totalParticipants }}</p>-->
    <div style="display: flex; flex-wrap: wrap; gap: 30px;">
      <div v-for="(question, index) in responses" :key="index"
           style="width: calc(33.33% - 20px); padding: 20px; border: 1px solid #ccc; border-radius: 10px; transition: transform 0.3s ease;"
           @mouseover="scaleCard(index, true)"
           @mouseout="scaleCard(index, false)">
        <h2>题目 {{ index + 1 }}</h2>
        <div ref="charts" :id="'chart-' + index" style="width: 80%; height: 300px; margin: 0 auto;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {showQ} from "@/api/system/questionnaire";


import * as echarts from 'echarts';

export default {
  data() {
    return {
      responses: [
        {AB: 10, ABC: 12},
        {ABD: 5, CD: 8},
        {A: 3, BC: 6},
        {D: 7, ABCD: 4},
        {AC: 9, BD: 11},
        {B: 13, C: 15},
        {AD: 2, BC: 14},
        {ABC: 16, D: 18},
        {AB: 20, CD: 22},
        {A: 25, BCD: 28}
      ],
      cardScales: Array(10).fill(1)
    };
  },
  computed: {
    totalParticipants() {
      // 实际应根据用户ID统计，这里返回题目数量作为示例
      return this.responses.length;
    }
  },
  mounted() {
    this.getShow();
  },
  methods: {
    async getShow() {
      // let id = this.$route.query.id;
      // console.log(id)
      await showQ().then(res => {
        console.log(res)
        this.responses=[]
        for(var i=0;i<res.info.length;i++){
          var p={A:0,B:0,C:0,D:0}
          p.A=res.info[i].asum
          p.B=res.info[i].bsum
          p.C=res.info[i].csum
          p.D=res.info[i].dsum
          this.responses.push(p)
        }
        console.log(this.responses)

        this.renderCharts();
      })

    },
    renderCharts() {
      const colorList = ['#3b82f6', '#6ee7b7', '#f97316', '#a855f7', '#ef4444', '#eab308'];

      this.responses.forEach((answerCounts, index) => {
        const chartDom = this.$refs.charts[index];
        const myChart = echarts.init(chartDom);

        // 获取当前题目的所有选项组合
        const options = Object.keys(answerCounts);
        const dataValues = options.map(option => answerCounts[option]);

        const option = {
          xAxis: {
            type: 'category',
            data: options,
            axisLabel: {
              color: '#4b5563',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#cbd5e1'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#4b5563',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#cbd5e1'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#e5e7eb'
              }
            }
          },
          series: [{
            type: 'bar',
            data: dataValues.map((value, idx) => ({
              value: value,
              itemStyle: {
                color: colorList[idx % colorList.length]
              }
            })),
            barWidth: '60%'
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: params => {
              return `${params[0].name}<br/>人数: ${params[0].value}`;
            },
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            textStyle: {
              color: '#fff'
            }
          }
        };

        myChart.setOption(option);
      });
    },
    scaleCard(index, isHover) {
      this.cardScales[index] = isHover ? 1.05 : 1;
      const cards = this.$el.querySelectorAll('.question-card');
      if (cards[index]) {
        cards[index].style.transform = `scale(${this.cardScales[index]})`;
      }
    }
  }
};
</script>

<style scoped>
.question-card {
  transform-origin: center;
  transition: transform 0.3s ease;
}
</style>
